<!-- 

Создание нового графического объекта: 
var img = new Image();  // Создание нового объекта ихображения

img.src = 'image.png';  // Путь к изображению которое необходимо нанести на холст

Кстати в качестве источника изображения, можно указать вот такую строку в которой изображение и описанно: 
imgSrc = '';

Теперь мы перейдём к рисованию изображения на холсте. Для этого существует функция drawImage

1. drawImage

drawImage(image, x, y) // Где x и y это координаты левого верхнего угла изображения, а первый параметр это то изображение которое должно быть нарисовано

Стоит отметить что загрузка изображения происходит сразу после присвоения объекту источника изображения, и если оно не загрузится полностью к моменту вызова функции отрисовки, то оно попросту не будет нарисовано на холсте. Для избежания этой ситуации используется такая конструкция: 
var img = new Image();  // Новый объект

img.onload = function(){  // Событие которое будет исполнено в момент когда изображение будет полностью загружено

}

img.src = 'myImage.png';  // Путь к изображению

Вот мы наверное и дошли до момента когда можно рассмотреть элементарный пример: 

-->

<html>

<META charset='UTF8'>

<head>

  <title>imgExample</title>

</head>

<body>

  <canvas id='example'>Обновите браузер</canvas>

  <script>

    var example = document.getElementById("example");

    var ctx = example.getContext('2d');  // Контекст холста

    var pic = new Image();  // "Создаём" изображение

    pic.src = 'http://habrahabr.ru/i/nocopypast.png';  // Источник изображения, позаимствовано на хабре

    pic.onload = function() {  // Событие onLoad, ждём момента пока загрузится изображение

      ctx.drawImage(pic, 0, 0);  // Рисуем изображение от точки с координатами 0, 0

    }

  </script>

</body>

</html>
